import React, { Component } from "react";
// import { createPortal } from "react-dom";
import withPortal from "./withPortal";
import styled from "styled-components";
import { bool, string, func, oneOfType, number } from "prop-types";

const Shadow = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
`;

const Center = styled.div`
  position: absolute;
  width: 360px;
  background-color: #fff;
  border-radius: 6px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
`;

const Header = styled.header`
  height: 60px;
  border-bottom: 1px solid #aaa;
  line-height: 60px;
`;

const Footer = styled.footer`
  height: 60px;
  border-top: 1px solid #aaa;
  line-height: 60px;
`;

// @withPortal是装饰器的语法，只能给类组件用
@withPortal
class Modal extends Component {
  static propTypes = {
    visible: bool.isRequired,
    title: string,
    onOk: func,
    onCancel: func,
    width: oneOfType([string, number]),
    okText: string,
    cancelText: string,
  };

  static defaultProps = {
    width: 520,
    okText: "确定",
    cancelText: "取消",
  };

  render() {
    // return createPortal(
    //   <div className="modal">modal</div>,
    //   document.querySelector("body")
    // );

    // console.log(this.props);

    const {
      visible,
      title,
      children,
      onOk,
      onCancel,
      width,
      okText,
      cancelText,
    } = this.props;

    return (
      <>
        {visible && (
          <Shadow>
            <Center style={{ width: width + "px" }}>
              <Header>{title}</Header>
              {children}
              <Footer>
                <button onClick={onCancel}>{cancelText}</button>
                <button onClick={onOk}>{okText}</button>
              </Footer>
            </Center>
          </Shadow>
        )}
      </>
    );
  }
}

export default Modal;

// export default withPortal(Modal);
// const App2 = withPortal(Modal);
// export default App2;

// const Modal2 = withPortal(() => {});
// export default withPortal(Modal2);
// const App2 = withPortal(Modal);
// export default Modal2;
